<template>
  <view class="container-withdrawal_success">
    <header>
      <view class='head-top' @click="$goPath(1)">
        <image src="/static/images/right-white.png" mode='aspectFit|aspectFill|widthFix' alt=""  />
      </view>
      <view class='head-btm'>
        <u-icon name="checkmark-circle-fill" color="#fff" size="30px" />
        <text>提现成功!</text>
      </view>
    </header>

    <section>
      <view class='sect-infoCard'>
        <view class='infoCard-price'>￥<text>{{detail.money}}</text></view>
        <view class='infoCard-number'>
          <view>提现金额</view>
          <view>￥<text>{{detail.money}}</text></view>
        </view>

        <view class='infoCard-number'>
          <view>到账银行卡</view>
          <view>尾号<text>{{detail.bankCard}}</text></view>
        </view>

        <view class='infoCard-number'>
          <view>服务费</view>
          <view>￥<text>{{detail.serviceCharge}}</text></view>
        </view>
      </view>
    </section>

  </view>
</template>
<script>
export default {
  data() {
    return {
      detail: {}
    }
  },

  methods: {
    //返回
    goBack() {
      uni.navigateBack();
    },
  },

  onLoad(options) {
    this.detail = JSON.parse(options.detail);
  },

}
</script>
<style>

.container-withdrawal_success {
  width: 100%;
  height: 100vh;
  font-size: 14px;
  font-family: 'PingFang SC-Medium';
  background: #FFFFFF;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

header {
  width: 100%;
  padding: 60px 12px 50px;
  border-radius: 0 0 20px 20px;
  box-sizing: border-box; 
  color: #fff; 
  background-color: #32B499;  
  background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/homeTopIcon.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  font-size: 18px;
  font-family: 'PingFang SC-Bold';
  display: flex;
  flex-direction: column;
}

header .head-top > image {
  width: 8px;
  height: 16px;
  display: block;
  margin-right: 3px;
}

.container-withdrawal_success .head-btm {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 20px;
  font-family: 'PingFang SC-Bold';
}

.container-withdrawal_success .head-btm text {
  margin-left: 12px;
}

section {
  padding:0 26px;
  box-sizing: border-box;
}

.container-withdrawal_success .sect-infoCard {
  width: 100%;
  height: 237px;
  background-image: url(https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/rechargeSuccess-card.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  top: -30px;
  padding: 0 30px;
  box-sizing: border-box;
}

.container-withdrawal_success .infoCard-price {
  width: 100%;
  text-align: center;
  padding-top: 23px;
  box-sizing: border-box;
  margin-bottom: 35px;
}

.container-withdrawal_success .infoCard-price text {
  font-family: 'DIN-Medium';
  font-size: 24px;
}

.container-withdrawal_success .infoCard-number {
  color: #999999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-right: 12px;
  box-sizing: border-box;
  font-size: 16px;
}

.container-withdrawal_success .infoCard-number:last-child {
  margin-bottom: 0;
}

.container-withdrawal_success .infoCard-number > view:last-child {
  color: #333;
}

</style>